<template>
	<view class="page">

	<!-- 	<view class="padding flex flex-wrap justify-between align-center ">
					<input class="search-text" type="text" v-model="keyword" placeholder="输入品牌,型号" />
			 <button class="cu-btn round bg-olive" @click="search">搜索</button> 
					 
		</view> -->
		<view class="cu-form-group margin-top">
				<view class="title">  <text class="icos search-ico-wapper" >&#xe63c;</text> </view>
			 <input class="search-text" type="text" v-model="keyword" placeholder="输入品牌或型号" />
			 <button class="cu-btn round bg-olive" @click="search">搜索</button> 
			  <button class="cu-btn round bg-blue" @tap="showModal" data-target="DrawerModalL">更多</button>  
		</view>
		
		<view class="content" >
			<view class="uni-list">
				<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,index) in cars" :key="index" @tap="openinfo" :data-carid="item.id">
					<view class="uni-media-list">
						<image class="listimg" :src="item.firstImg"></image>
						<view class="uni-media-list-body"> 
							<view class="uni-media-list-text-top">{{item.brandName}}  {{item.xingHao}}</view>
							<view class="uni-media-list-text-bottom uni-ellipsis">
							 {{item.speedAssembly}}  {{item.regdate.substring(0,4)}}年/{{item.Wkm}}万公里
							 <view class="sellprice">{{item.showPrice /10000}}万</view> 
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 模态搜索信息 -->
		<view class="cu-modal drawer-modal justify-start" :class="modalName=='DrawerModalL'?'show':''" @tap="hideModal">
			<view class="cu-dialog basis-lg" @tap.stop="" :style="[{top:CustomBar+'px',height:'calc(100vh - ' + CustomBar + 'px)'}]">
				 <view class="cu-form-group">
				 	<view class="title" >价格区间</view>
				  </view>
				  <view class="cu-form-group">
					  <input  type="number" name="input"  placeholder="最低价" v-model="minPrice"></input>一
					  <input  type="number" name="input" placeholder="最高价" v-model="maxPrice"></input>
				 </view>
				 <view class="cu-form-group">
				 	<view class="title" >变速箱:</view>
					   	<view class='cu-tag' :class="clsAT" @tap="ckat">自动</view>
					   	<view class='cu-tag' :class="clsMT" @tap="ckmt">手动</view>
				  </view>
				<view class="cu-form-group">
					<view class="title" >店名:</view>
					<input   name="input"  v-model="ShopName"></input>
				 </view>
			<view class="cu-form-group">
					 <button class="cu-btn round bg-olive" @click="search">搜索</button> 
				</view>			
			
			</view>
		</view>
		
	</view>
</template>

<script> 
 import service from '../../service.js';
	 var _self;
	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				refreshing: false,
				title: 'Hello',
				cars: [],
				fetchPageNum: 1,
				keyword:'',
				modalName: null,
				minPrice:'',
				maxPrice:'',
				speedAssembly:'',
				clsAT:'line-green',
				clsMT:'line-green',
				ShopName:'',
			
			}
		},
		onLoad(e) {
			_self=this;
			setTimeout(() => {
				this.getData();
			}, 300);
	 
		},
		onPullDownRefresh() {
			console.log('顶部下拉刷新整个页面');
			this.refreshing = true;
			this.getData();
		},
		onReachBottom() {
			console.log('底部上拉加载分页');
			if (this.fetchPageNum > 100) {
				this.loadMoreText = '不再加载更多了'
				return;
			}
			this.getData();
		},
		methods: {
			getData(e) {
				console.log("请求查询"+_self.fetchPageNum);
				uni.request({
					url: service.BaseUrl+'api/apiCar/QueryCarList',
					data: {
						PageIndex:_self.fetchPageNum,
						PageSize:8 ,
						keyword:_self.keyword,
						speedAssembly:_self.speedAssembly,
						maxPrice:_self.maxPrice,
						minPrice:_self.minPrice,
						ShopName:_self.ShopName,
						},
					method: 'POST',
					success: (ret) => {
						if (ret.statusCode !== 200 && ret.data.Code!=1) {
							console.log('请求失败', ret)
							return;
						}
						const data = ret.data.Data.data;
						// if (this.refreshing && data[0].id === this.cars[0].id) {
						// 	uni.showToast({
						// 		title: '已经最新',
						// 		icon: 'none',
						// 	});
						// 	this.refreshing = false;
						// 	uni.stopPullDownRefresh();
						// 	return;
						// }
						let list = [];
						for (var i = 0; i < data.length; i++) {
							var item = data[i];
							//item.guid = this.newGuid() + item.id
							list.push(item);
						}
			
						if (this.refreshing) {
							this.refreshing = false;
							uni.stopPullDownRefresh();
							this.cars = list;
						} else {
							this.cars = this.cars.concat(list);
						}
						this.fetchPageNum += 1;
					}
				});
			},		
			search(){
				this.modalName=null;
					this.refreshing = true;
				this.fetchPageNum=1;
			     this.getData();	
			},
			openinfo(e){
				var carid= e.currentTarget.dataset.carid;
				// uni.showToast({
				// 	title:carid
				// })
				uni.navigateTo({
					url: '../carinfo/carDetail?carid='+carid,
				});
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			ckat(){
				if(this.clsAT=="line-green"){
					this.clsAT="bg-green";
					this.speedAssembly="自动";
					this.clsMT="line-green";
				}
				else{
					
						this.clsAT="line-green";
						this.speedAssembly="";
				}
			}
			,ckmt(){
				if(this.clsMT=="line-green"){
					this.clsMT="bg-green";
					this.clsAT="line-green";					
					this.speedAssembly="手动";
				}
				else{
						this.clsMT="line-green";
						this.speedAssembly="";
				}
			}
		}
	}
</script>


<style> 

	 .uni-media-list-body{height: auto;	}
	 .uni-media-list-text-top{line-height: 2.6em;}
	 .uni-media-list-text-bottom{
	 		font-size: 30upx;
	 }
	
	 
.searchBox{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	padding: 0rpx 20upx 20upx 20upx ;
	 background-color: #C0C0C0;
	/* 固定搜索栏 */
	/* position: fixed; */
	 
	/* //z-index: 1000; */
	
}

.search-text{
	font-size: 16px;
	width: 400rpx;
	height: 50rpx;
}

.search-ico-wapper{
	
	 height: 40rpx;
	 width: 40rpx;
	 margin-top: 3;
	 padding-top: 0px;
}


/* 图片和价格 */
	.listimg{
		width: 270upx;
		height: 190upx;
		margin-right: 10upx;
		margin-left: 0upx;
	}
	
	.sellprice{
		color: #f96e39;
		font-size: 37upx;
		
	}
	
</style>
